<template>
    <!-- 列表 -->
    <!-- <ContentWrap>
        <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="100px">
            <el-form-item label="规则名称" prop="ruleName">
                <el-input v-model="queryParams.ruleName" placeholder="请输入规则名称" clearable @keyup.enter="handleQuery"
                    class="!w-240px" />
            </el-form-item>
            <el-form-item label="消息模板" prop="templateName">
                <el-input v-model="queryParams.templateName" placeholder="请输入消息模板" clearable @keyup.enter="handleQuery"
                    class="!w-240px" />
            </el-form-item>
            <el-form-item>
                <el-button @click="handleQuery">
                    <Icon icon="ep:search" />查询
                </el-button>
                <el-button @click="resetQuery">
                    <Icon class="mr-5px" icon="ep:refresh" />
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </ContentWrap> -->
    <div>
        <el-button class="mb-10px" type="primary" @click="openForm('新增')" v-hasPermi="['beidaMeetingRule:saveOrUpdate']">新增</el-button>

        <!-- <el-button plain type="danger" @click="handleDelete()" icon="delete" :disabled="multipleSelection.length==0">删除</el-button> -->
        <el-table v-loading="loading" :data="list" row-key="id" @selection-change="handleSelectionChange"   header-cell-class-name="custom-header" stripe>
            <!-- <el-table-column type="selection" label="" align="center" :reserve-selection="true" width="55" /> -->
            <el-table-column align="center" :show-overflow-tooltip="true" label="规则名称" prop="ruleName" width="180">
                <template #default="scope">
                    <el-button type="text" @click="openForm('查看', scope.row.id)" v-hasPermi="['beidaMeetingRule:getById']">
                        {{ scope.row.ruleName }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" :show-overflow-tooltip="true" label="地震类型" prop="earthquakeType" width="120">
                <template #default="scope">
                    <span v-if="scope.row.earthquakeType=='1'">正式地震</span>
                    <span v-if="scope.row.earthquakeType=='2'">测试地震</span>
                    <span v-if="scope.row.earthquakeType=='3'">演练地震</span>
                    <span v-if="scope.row.earthquakeType=='4'">自动地震</span>
                </template>
            </el-table-column>
            <el-table-column align="center" :show-overflow-tooltip="true" label="应急响应级别" prop="responseLevel1" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="震级范围" prop="magnitude1" />
            <el-table-column align="center" :show-overflow-tooltip="true" label="接收用户组" prop="groupNames"></el-table-column>
            <el-table-column align="center" label="启用" prop="isEnable">
                <template #default="scope">
                    <el-switch v-model="scope.row.isEnable" active-value="1" inactive-value="0"
                        @click="onChangeStateClick(scope.row)" :disabled="!checkPermissions(['beidaMeetingRule:updateStatus'])"/>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template #default="scope">
                    <!-- <el-button link type="primary" @click="openForm('查看', scope.row.id)">
                        查看
                    </el-button> -->
                    <el-button link type="primary" @click="openForm('修改', scope.row.id)" v-hasPermi="['beidaMeetingRule:saveOrUpdate']">
                        修改
                    </el-button>
                    <el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['beidaMeetingRule:delete']">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total"
            @pagination="getList" />
    </div>
</template>
<script lang="ts" setup>
import * as publishRuleApi from '@/api/infoArrive/teleMeeting/index'

defineOptions({ name: 'PublishRule' })
const emit = defineEmits(['openForms'])
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const loading = ref(true) // 列表的加载中
const list = ref<any>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryFormRef = ref()
const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    ruleName:'',
    templateName:''
})
const handleQuery = () => {
  getList()
}
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}
const multipleSelection = ref<any>([])
const handleSelectionChange = (val) => {
    multipleSelection.value = val
}
/** 查询列表 */
const getList = async () => {
    loading.value = true
    try {
        const data = await publishRuleApi.getPublishRuleList(queryParams)
        list.value = data.list
        total.value = data.total
    } finally {
        loading.value = false
    }
}
/** 添加/修改操作 */
const openForm = (type: string, id?: string) => {
    emit('openForms', { type, id, typeForm: 'addRule' })
}

/** 删除按钮操作 */
const handleDelete = async (id?: string) => {
    const ids = id? [id]:multipleSelection.value.map(item=>item.id)
    try {
        // 删除的二次确认
        await message.delConfirm()
        // 发起删除
        await publishRuleApi.deletePublishRule(ids)
        message.success(t('common.delSuccess'))
        // 刷新列表
        await getList()
    } catch { }
}

/** 修改状态 */
const onChangeStateClick = async (row: any) => { 
    try {
        // 修改状态的二次确认
        const text = row.isEnable === '1' ? '启用' : '停用'
        await message.confirm('确认要"' + text + '""' + row.ruleName + '"的数据吗?')
        await publishRuleApi.enablePublishRule({ status: row.isEnable, id: row.id });
        message.success(text + '成功')
        await getList()
    } catch {
        row.isEnable =
            row.isEnable === '1' ? '0' : '1'
    }
}
defineExpose({ getList }) // 提供 open 方法，用于打开弹窗
/** 初始化 **/
onMounted(() => {
    getList()
})
</script>

<style scoped>
.titleFont {
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-weight: bold;
  margin-bottom: 15px;
}

:deep(.custom-header) {
  background-color: #F2F3F5 !important;
  /* 设置表头背景色 */
  color: #333 !important;
  /* 设置表头文字颜色 */
  font-weight: bold !important;
  /* 设置表头文字加粗 */
  height: 42px;
}

/* 使用::v-deep调整每一行的样式 */
::deep(.el-table) {
  .el-table__row {
    font-size: 16px;
    height: 40px;
    /* 设置每一行的高度 */
    line-height: 40px;
    /* 设置行内文本的垂直对齐 */
    color: #333333;
  }
}
</style>
